<script setup>
import { ref } from 'vue';
import { getStatusListApi, createStatusApi, editStatusApi, deleteStatusApi } from '@/service/setting.js';
// 分页组件
import CommonPagination from '@/components/pagination.vue';
import CommonForm from '@/components/common-form.vue';

import { ElMessage } from 'element-plus';

const pagination = reactive({
  page: 1,
  limit: 15,
  total: 0
});

const filterFrom = ref({
  keyword: ''
});

const tableData = ref([]);
const fetchList = async () => {
  let params = {
    ...filterFrom.value,
    pagination
  };
  const res = await getStatusListApi(params);

  if (res.code === 200) {
    tableData.value = res.data.list;
    pagination.total = res.data.pagination.total;
  } else {
    ElMessage.error(res.msg);
  }
};

// 搜索
const handleSearch = () => {
  pagination.page = 1;
  fetchList();
};

// 删除状态
const handleDelete = (row) => {
  // 提示是否删除
  ElMessageBox.confirm('是否删除该状态?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    deleteStatusApi({id: row.id}).then(res => {
      if (res.code === 200) {
        ElMessage.success('删除成功');
        fetchList();
      } else {
        ElMessage.error(res.msg);
      }
    });
  });
};



// 添加状态
const commonAddFormRef = ref(null);
const showAddForm = () => {
  commonAddFormRef.value.openDrawer("添加回访状态");
};

const handleAddSubmit = (data) => {
  console.log('add', data);
  createStatusApi(data).then(res => {
    if (res.code === 200) {
      ElMessage.success('添加成功');
      commonAddFormRef.value.closeDrawer();
      fetchList();
    } else {
      ElMessage.error(res.msg);
    }
  });
};

// 编辑状态
const commonEditFormRef = ref(null);
const showEditForm = (row) => {
  commonEditFormRef.value.openDrawer("编辑回访状态", row);
};

const handleEditSubmit = (data) => {
  console.log('edit', data);
  editStatusApi(data).then(res => {
    if (res.code === 200) {
      ElMessage.success('编辑成功');
      commonEditFormRef.value.closeDrawer();
      fetchList();
    } else {
      ElMessage.error(res.msg);
    }
  });
};


onMounted(() => {
  fetchList();
});

</script>

<template>
<el-main>
  <div class="toolbar">
    <el-button type="primary" @click="showAddForm">添加</el-button>
    <el-input v-model="filterFrom.keyword" placeholder="请输入回访意向名称" style="width: 200px"></el-input>
    <el-button type="primary" @click="handleSearch">搜索</el-button>
  </div>
  <el-table class="list" :data="tableData" border style="width: 100%">
    <el-table-column prop="id" label="ID" width="100" align="center"></el-table-column>
    <el-table-column prop="title" label="回访意向名称"></el-table-column>
    <el-table-column prop="sort" label="排序" align="center" width="100"></el-table-column>
    <el-table-column prop="status" label="状态" align="center" width="100">
      <template #default="{ row }">
        <el-tag v-if="row.status === 1" type="success">启用</el-tag>
        <el-tag v-else type="danger">禁用</el-tag>
      </template>
    </el-table-column>
    <el-table-column label="操作" width="300">
      <template #default="{ row }">
        <el-button type="primary" @click="showEditForm(row)">编辑</el-button>
        <el-button type="warning" @click="handleDelete(row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>

  <div class="pagination">
    <common-pagination :pagination="pagination" @pagination-change="fetchList"/>
  </div>

  <common-form ref="commonAddFormRef" @submit="handleAddSubmit" table="tk_config_status"></common-form>
  <common-form ref="commonEditFormRef" @submit="handleEditSubmit" table="tk_config_status"></common-form>
</el-main>
</template>

<style scoped>

</style>